/*

 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Select, Modal, Row, Col, Spin, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import cx from 'classnames'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './codeChannelStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

const Option = Select.Option
const confirm = Modal.confirm;



const routeView = function ({ dispatch, model, form }) {

  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  const { modelObj, namespace } = model
  const { jumpUrl,areaList, option, area1, currentImg, loading, currentItem, shareModal, qrcodeCount, biz, products } = modelObj
  // 复制链接
  function copyCode(id = '') {
    dispatch({
      type: `${namespace}/getDetail`,
      payload: {
        id,
      }
    })
  }
  // 资讯详情页跳转
  function detailSkip(type, id = '') {

    hashHistory.push({
      pathname: type == 'chart' ? '/home/codeChannelAdmin/codeChannelStatistics' : '/home/codeChannelAdmin/codeChannelEdit',
      query: { actionType: type, id }
    });
  }
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: " admin/qrcode/list-by-page",
      // api_url: "admin/activity/activityList",
      //
      // 接口方式
      method: "GET",
      // headers: {
      //   "Content-type": "application/json"
      // },
      app: "",
      // 接口参数
      params: "",
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'regionId',
            zh_name: '所属区域',
            elem_type: 'Select',
            elem_valid_type: 'string',
            //关联的更改的搜索字段
            cmpt_items: area1,
          },
          {
            en_name: 'province',
            zh_name: '所属城市',
            elem_type: 'Cascader',
            elem_valid_type: 'string',
            changeOnSelect: true,
            cmpt_items: areaList,
            split_keys: ['provinceCode', 'cityCode'],
            onFocus: () => {
              area1.map((item, index) => {
                console.log(biz.queryForm.regionId, item.value)
                if (biz.queryForm && biz.queryForm.regionId && biz.queryForm.regionId == item.value) {
                  console.log(biz.queryForm.regionId, item.value)
                  dispatch({
                    type: `${namespace}/updateStore`,
                    payload: {
                      areaList: item.children,
                    }
                  })
                }
              })
            },
          },
          {
            en_name: 'productId',
            zh_name: '项目名称',
            elem_type: 'Select',
            elem_valid_type: 'string',
            // showSearch:true,
            cmpt_items: products,
            onFocus: () => {
              if (biz.queryForm && biz.queryForm.cityCode && biz.queryForm.cityCode) {
                dispatch({
                  type: `${namespace}/getProduct`,
                  payload: {
                    cityCode: biz.queryForm.cityCode,
                  }
                })
              }
            },
          },
          {
            en_name: 'channelName',
            zh_name: '渠道名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      table:
      {
        status_params: "status=0",
        status_text: "全部",
        // 表头字段列表
        scroll: { x: 1500 },
        fields: [
          {
            en_name: "key",
            zh_name: "序号",
            width: 60,
            render: (a, item, index, d, e, f) => {
              return index + 1
            },
          },
          {
            en_name: "channelName",
            zh_name: "传播渠道2类",
            width: 130,
          },
          {
            en_name: "channelTypeName",
            zh_name: "传播渠道1类",
            width: 130,
          },
          {
            en_name: "createPerson",
            zh_name: "创建人",
            width: 100,
          },
          {
            en_name: "regionName",
            zh_name: "区域",
            width: 150,
          },
          {
            en_name: "areaName",
            zh_name: "城市",
            width: 130,

          },
          {
            en_name: "productName",
            zh_name: "所属项目",
            width: 120,
          },
          {
            en_name: "department",
            zh_name: "创建人所属部门",
            width: 170,
          },
          {
            en_name: "createTime",
            zh_name: "创建时间",
            width: 180,
          },
          {
            en_name: "remark",
            zh_name: "备注",
          },
          {
            en_name: "edit",
            zh_name: "操作",
            width: 230,
            fixed: 'right',
            render: (a, item, index, d, e, f) => {
              return (
                <span>
                  <FlagBtn node={<a onClick={() => {
                    copyCode(item.id)
                  }}>复制链接<span className="ant-divider" /></a>}
                  >
                  </FlagBtn>
                  {/* <a onClick={() => detailSkip('chart', item.productId)}>查看报表</a>{<span className="ant-divider" />} */}
                  <FlagBtn node={<a onClick={() => {
                    detailSkip('detail', item.id)
                  }}>查看详细<span className="ant-divider" /></a>}
                    btnId={'120201'}
                  >
                  </FlagBtn>
                  <FlagBtn node={<a onClick={() => {
                    deleteCode(item.id)
                  }}>删除<span className="ant-divider" /></a>}
                    btnId={'120202'}
                  >
                  </FlagBtn>
                  <FlagBtn node={<a onClick={() => share(item)}>下载二维码</a>}
                    btnId={'120203'}
                  >
                  </FlagBtn>
                </span>
              )
            },
          },
        ]
      },
      action_bar: [
        {
          func_name: "add",
          label: "新增",
          btnId: '120204',
          type: "primary",
          onClick: (e) => {
            hashHistory.push({
              pathname: '/home/codeChannelAdmin/codeChannelEdit',
              query: { actionType: 'add', }
            });
          }
        }
      ]
    },
  }

  //删除
  function deleteCode(id) {
    confirm({
      title: '删除确认',
      content: '删除该数据后，对应的二维码则会失效，无法扫描，请确认',
      okText: '确认删除',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `${namespace}/deleteCode`,
          payload: {
            id,
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  function updateModal(type) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { shareModal: type }
    })
  }
  function share(item) {
    updateModal(true)
    dispatch({
      type: `${namespace}/shareImg`,
      payload: { productId: item.productId }
    })
    item.title = item.imgUrl ? item.imgUrl.split('/')[4] : ''
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { currentItem: item, productId: item.productId }
    })
  }
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      console.log(biz)
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }
  return (
    <div className={cx('pageLayout')} id="gug">
      <Modal
        title={`投放渠道名称：${currentItem.title}`}
        visible={shareModal}
        onOk={() => updateModal(false)}
        onCancel={() => updateModal(false)}
        footer={null}
      >
        <Row>
          <Col style={{ marginTop: 20, textAlign: 'center' }}>
            <img src={currentItem.imgUrl} alt="" width={"200px"} style={{}} />
            <div style={{ textAlign: "center", marginTop: 10 }}>
              <a onClick={() => {
                dispatch({
                  type: `${namespace}/count`,
                  payload: {}
                })
              }
              }>下载二维码({currentItem.downloadTimes}次)</a>
            </div>

          </Col>
        </Row>
      </Modal>
      <ListPage pageProps={pageProps} />
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))
